<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="${base}/static/layui/css/layui.css"
	media="all" />
<link rel="stylesheet" href="${base}/static/css/main.css" media="all" />
<style>
.childrenBody {
	padding: 20px;
	background-color: #f2f2f2;
}

.badge {
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -9px;
	display: inline-block;
	padding: 0 6px;
	font-size: 12px;
	text-align: center;
	background-color: #FF5722;
	color: #fff;
	border-radius: 2px;
}

.card-list {
	color: #666;
	font-size: 12px;
}

.card-list .badge-color {
	position: absolute;
	right: 15px;
	display: inline-block;
	padding: 0 6px;
	text-align: center;
	border-radius: 2px;
}

.card-list .big-font {
	font-size: 36px;
	line-height: 36px;
	padding: 5px 0 10px;
}

.usernote h3 {
	padding-bottom: 5px;
	font-weight: 700;
}

.usernote h3 .phone {
	font-weight: 100;
	margin-left: 30px;
	color: #666
}

.usernote {
	padding: 0 10px 10px;
}

.usernote p {
	padding-bottom: 10px;
}

.usernote li {
	position: relative;
	padding: 10px 0;
	border-bottom: 1px solid #EEE;
}

.usernote li>span {
	color: #999;
}

.backlog-body {
	display: block;
	padding: 10px 15px;
	background-color: #f8f8f8;
	color: #999;
	border-radius: 2px;
	transition: all .3s;
	-webkit-transition: all .3s;
}

.backlog-body p cite {
	font-style: normal;
	font-size: 30px;
	font-weight: 300;
	color: #009688;
}

.backlog-body h3 {
	padding-bottom: 10px;
	font-size: 12px;
}

[lay-href], [lay-tips], [layadmin-event] {
	cursor: pointer;
}

.layui-tab-title .layui-this {
	background-color: inherit !important;
}
</style>
</head>
<body class="childrenBody">
	<div class="row">
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-xs12 layui-col-md4">
					<div class="layui-card">
						<div class="layui-card-header">
							今日订单 <span class="layui-badge layui-bg-cyan badge">付款订单</span>
						</div>
						<div class="layui-card-body card-list">
							<p class="big-font" id="countProduct">
								<span id="todayordernum">0</span>
							</p>
							<p style="height: 24px; width: 100%;">
								<span class="badge-color">本月总订单 <span id="monthordernum">0</span></span>
							</p>
						</div>
					</div>
				</div>
				<div class="layui-col-xs12 layui-col-md4">
					<div class="layui-card">
						<div class="layui-card-header">
							今日销售额 <span class="layui-badge layui-bg-blue badge">付款订单销售额</span>
						</div>
						<div class="layui-card-body card-list">
							<p class="big-font" id="countNews">
								￥<span id="todaymoney">0</span>
							</p>
							<p style="height: 24px; width: 100%;">
								<span class="badge-color">本月销售额 ￥<span id="monthmoney">0</span></span>
							</p>
						</div>
					</div>
				</div>
				<div class="layui-col-xs12 layui-col-md4">
					<div class="layui-card">
						<div class="layui-card-header">
							今日新增用户 <span class="layui-badge layui-bg-orange badge">登录用户</span>
						</div>
						<div class="layui-card-body card-list">
							<p class="big-font" id="countDownload">
								<span id="todayusernum">0</span>
							</p>
							<p style="height: 24px; width: 100%;">
								<span class="badge-color">总用户 <span id="totalusernum">0</span></span>
							</p>
						</div>
					</div>
				</div>
			</div>

			<div class="layui-row layui-col-space15" style="display: none">
				<div class="layui-col-md8">
					<div class="layui-row layui-col-space15">
						<div class="layui-col-md6">
							<div class="layui-card">
								<div class="layui-card-header">商品总览</div>
								<div class="layui-card-body">
									<ul class="layui-row layui-col-space10">
										<li class="layui-col-xs6"><a
											lay-href="app/content/comment.html" class="backlog-body">
												<h3>在售商品</h3>
												<p>
													<cite>66</cite>
												</p>
										</a></li>
										<li class="layui-col-xs6"><a href="javascript:;"
											onclick="layer.tips('不跳转', this, {tips: 3});"
											class="backlog-body">
												<h3>货品数量</h3>
												<p>
													<cite>20</cite>
												</p>
										</a></li>
										<li class="layui-col-xs6"><a
											lay-href="app/forum/list.html" class="backlog-body">
												<h3>商品评论</h3>
												<p>
													<cite>12</cite>
												</p>
										</a></li>
										<li class="layui-col-xs6"><a
											lay-href="template/goodslist.html" class="backlog-body">
												<h3>滚动广告</h3>
												<p>
													<cite>99</cite>
												</p>
										</a></li>
									</ul>
								</div>
							</div>
						</div>
						<div class="layui-col-md6">
							<div class="layui-card">
								<div class="layui-card-header">订单总览</div>
								<div class="layui-card-body">
									<ul class="layui-row layui-col-space10">
										<li class="layui-col-xs6"><a lay-href="#"
											class="backlog-body">
												<h3>待发货</h3>
												<p>
													<cite>66</cite>
												</p>
										</a></li>
										<li class="layui-col-xs6"><a href="javascript:;"
											onclick="layer.tips('不跳转', this, {tips: 3});"
											class="backlog-body">
												<h3>已发货</h3>
												<p>
													<cite>20</cite>
												</p>
										</a></li>
										<li class="layui-col-xs6"><a
											lay-href="app/forum/list.html" class="backlog-body">
												<h3>未付款</h3>
												<p>
													<cite>12</cite>
												</p>
										</a></li>
										<li class="layui-col-xs6"><a
											lay-href="template/goodslist.html" class="backlog-body">
												<h3>未评论</h3>
												<p>
													<cite>99</cite>
												</p>
										</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="layui-col-md4">
					<div class="layui-card">
						<div class="layui-card-header">服务器运行环境</div>
						<div class="layui-card-body layui-text">
							<table class="layui-table">
								<colgroup>
									<col width="100">
									<col>
								</colgroup>
								<tbody>
									<tr>
										<td>内存</td>
										<td><span id="serverMemFree"></span> MB / <span
											id="serverMemTotal"></span> MB <span id="serverMemPercent"
											style="color: blue; margin-left: 10px;"></span></td>
									</tr>
									<tr>
										<td>系统名称</td>
										<td id="serverOsName"></td>
									</tr>
									<tr>
										<td>系统版本</td>
										<td id="serverOsVersion"></td>
									</tr>
									<tr>
										<td>JDK版本</td>
										<td id="serverJavaVersion"></td>
									</tr>
									<tr>
										<td>Java类版本</td>
										<td id="serverJavaClassVersion"></td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>

			<div class="layui-col-sm12" style="display: none;">
				<div class="layui-card">
					<div class="layui-card-header">库存告警</div>
					<div class="layui-card-body">
						<ul class="usernote">
						</ul>
					</div>
				</div>
			</div>

			<div class="col-md-6" style="margin-top: 15px;">
				<div class="layui-card">
					<div class="layui-card-body" style="height: 600px; width: 100%;">
						<div class="layui-tab layui-tab-brief"
							lay-filter="docDemoTabBrief">
							<ul class="layui-tab-title">
								<li class="layui-this">月度销售额</li>
								<li>年度销售额</li>
							</ul>
							<div class="layui-tab-content">
								<div class="layui-tab-item layui-show" style="width: 98%;">
									<div id="chart2"
										style="width: 98%; height: 500px; margin: 30px 0 30px 15px;"></div>
								</div>
								<div class="layui-tab-item" style="width: 98%;">
									<div id="chart1"
										style="width: 98%; height: 500px; margin: 30px 0 30px 15px;"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="${base}/static/layui/layui.js"></script>
	<script type="text/javascript" src="${base}/static/js/echarts.min.js"></script>
	<script>
		layui.use([ 'layer', 'jquery', 'element' ], function() {
			var layer = layui.layer, $ = layui.jquery, element = layui.element;

			element.on('tab(docDemoTabBrief)', function(elem) {
				//console.log(elem)
				//$('.layui-tab-item').children(elem.index).children(0).attr('width','100%');
				if(elem.index==0) {
					chart2();
				} else if(elem.index==1) {
					chart1();
				}
			});

			$.get('${base}${adminPrefix}/board/server', {}, function(res) {
				//console.log(res);
				if (res.data) {
					$('#serverMemFree').text(res.data.freeMemorySize);
					$('#serverMemTotal').text(res.data.totalMemorySize);
					$('#serverMemPercent').text(
							'已使用 ' + res.data.percentUsedMemory + '%');
					$('#serverOsName').text(res.data.osName);
					$('#serverOsVersion').text(
							res.data.osVersion + ' / ' + res.data.osArch);
					$('#serverJavaVersion').text(res.data.javaVersion);
					$('#serverJavaClassVersion')
							.text(res.data.javaClassVersion);
				}
			});

			$.get('${base}${adminPrefix}/board/nums', {}, function(res) {
				//console.log(res);
				if (res) {
					$('#todayordernum').text(res.data.todayordernum);
					$('#monthordernum').text(res.data.monthordernum);
					$('#todaymoney').text(res.data.todaymoney);
					$('#monthmoney').text(res.data.monthmoney);
					$('#todayusernum').text(res.data.todayusernum);
					$('#totalusernum').text(res.data.totalusernum);
				}
			});

			chart2();

			function chart1() {
				$('#chart1').html("数据加载中...");
				$('#chart1').removeAttr('_echarts_instance_');

				$.get('${base}${adminPrefix}/board/chartMoney/year', {}, function(res) {
					//	console.log(res);
					if (res.data) {
						var myChart = echarts.init(document.getElementById('chart1'));
						showChart(myChart, '今年销售额走势', res.data.xdatas, res.data.ydatas, '单位：元');
					}
				});
				
			}
			function chart2() {
				$('#chart2').html("数据加载中...");
				$('#chart2').removeAttr('_echarts_instance_');

				$.get('${base}${adminPrefix}/board/chartMoney/month', {}, function(res) {
				//	console.log(res);
					if (res.data) {
						var myChart = echarts.init(document.getElementById('chart2'));
						showChart(myChart, '本月销售额走势', res.data.xdatas, res.data.ydatas, '单位：元');
					}
				});
				
			}

			function showChart(myChart, title, xAxisData, seriesOneData,
					yAxisName) {
				var option = {
					title : {
						text : title
					},
					/* dataZoom : [ {
						show : true,
						type : 'slider',
						start : 90,
						end : 100
					} ], */
					tooltip : {
						trigger : 'axis'
					},
					toolbox : {
						show : false,
						feature : {
							dataZoom : {
								yAxisIndex : 'none'
							},
							dataView : {
								readOnly : false
							},
							magicType : {
								type : [ 'line' ]
							},
							restore : {},
							saveAsImage : {}
						}
					},
					xAxis : {
						type : 'category',
						boundaryGap : false,
						data : xAxisData
					},
					yAxis : {
						name : yAxisName,
						type : 'value',
						axisLabel : {
							formatter : '{value}'
						}
					},
					series : [ {
						data : seriesOneData,
						type : 'line',
						label : {
							normal : {
								show : true,
								position : 'top'
							}
						},
					} ]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			}
		});
	</script>
</body>
</html>